<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
        }
        table{
            margin: 0 auto;
            width: 60%;
            border: 2px solid #aaa;
            border-collapse: collapse;
        }
        table th,table td{
            border: 2px solid #aaa;
            padding: 5px;
        }
        th{
            background-color: #eee;
        }
    </style>
    <script src="../js/jquery-3.7.0.min.js"></script>
    <script>
        function add_shoppingcart(btn){
				var $tds = $(btn).parent().siblings();
				var name = $tds.eq(0).html();	
				var price = $tds.eq(1).html();	
                var $tr = $(
                    '<tr><td>'+name+'</td>'+
					'<td>'+price+'</td>'+
					'<td align="center">'+
						'<input type="button" value="-" onclick="decrease(this)"/>'+
						'<input type="text" size="3" readonly value="1"/>'+
						'<input type="button" value="+" onclick="indecrease(this)"/>'+
					'</td>'+
					'<td>'+price+'</td>'+
					'<td align="center">'+ 
                        '<input type="button" value="x" onclick="del(this)"/>'+
                        '</td></tr>'
                )
                $("#goods").append($tr)
                sum();
		}
        function del(btn){
            $(btn).parent().parent().remove();
        }
        //加法
        function indecrease(btn){
            var text = $(btn).prev();
            var amount = text.val();
            text.val(++amount);
            var price = $(btn).parent().prev().html();
            var money = price*amount;
            $(btn).parent().next().html(money);
			sum()
        }
        //减法
        function decrease(btn){
           var text = $(btn).next();
           var amount = text.val();
		   if(amount<=1){
			   return
		   }
           text.val(--amount);
           var price = $(btn).parent().prev().html();
           var money = price*amount;
           $(btn).parent().next().html(money);
           sum()
        }
        //求和
		function sum(){
			var trs = $("#goods tr")
			var n = 0;
			for(var i=0;i<trs.length;i++){
				//获取每一行中的金额
				var money = trs.eq(i).children().eq(3).html();
				n += parseFloat(money);
			}
			//将合计值写入合计列
			$("#total").html(n)
			
		}
    </script>
</head>
<body>
    <h1>真划算</h1>
    <table>
        <tr>
            <th>商品</th>
            <th>单价(元)</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>罗技M185鼠标</td>
            <td>80</td>
            <td>黑色</td>
            <td>893</td>
            <td>98%</td>
            <!-- 
                定义事件时，若传入this，他是本次事件触发的对象。
                this=正在点击的元素
             -->
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
            </td>
        </tr>
        
        <tr>
            <td>微软x470键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
            </td>
        </tr>
        
        <tr>
            <td>洛克iphone13手机壳</td>
            <td>60</td>
            <td>黑色</td>
            <td>672</td>
            <td>99%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
            </td>
        </tr>
        
        <tr>
            <td>蓝牙耳机</td>
            <td>100</td>
            <td>蓝色</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
            </td>
        </tr>
        <tr>
            <td>金士顿U盘</td>
            <td>70</td>
            <td>红色</td>
            <td>487</td>
            <td>100%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
            </td>
        </tr>
    </table>
    
    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="goods"> 
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td id="total"></td>
                <td></td>
            </tr>
        </tfoot>
        
    </table>
</body>
</html>